import {useState,useEffect} from 'react'
import ReactDom from 'react-dom'
function TestEffect(){

/*useEffect 本质是一个函数
可以把这个函数理解为 
componentDidMount  ->>  useEffect(回调,[])
componentDidUpdate, -->> useEffect(回调,[依赖选项])
componentWillUnmount 这三个函数的组合 
componentWillUnmount：通过返回的函数来执行

如果由retrun  当状态发生改变时 会先执行 retrun的函数
在执行useEffect中回调函数

useEffect(参数1,参数2)
参数1：回调函数
参数2：依赖选项 ，它是一个数组 (可选)

//useEffect执行过程：
  （有return时）
  1 初始化会被执行
  2 当依赖选项发生改变时 ，会先执行 return 的函数
  3 在执行useEffect回调函数

  （无return时）
     1 初始化会被执行
      3 在执行useEffect回调函数
*/
    let [num,setNum] = useState(0)
    let [num2,setNum2] = useState(0)

   useEffect(()=>{

     console.log("页面挂在完毕");

    return ()=>{
        console.log("组件被卸载"); 
    } 
      
    /*let timeId =  setInterval(()=>{
        console.log("更新")
    },1000)
    return ()=>{
       console.log("组件被卸载");
       clearInterval(timeId)
    } */
   },[num2])

    return(
        <div>
            <h1>useEffect</h1>
            <p>显示的num值为：{num}</p>
            <button onClick={()=>{
                setNum(num+1);
            }}>点击+1</button>
            <hr></hr>
            <p>显示的num2值为：{num2}</p>
            <button onClick={()=>{
                setNum2(num2+1);
            }}>点击+1(num2)</button>
            <hr></hr>
            <button onClick={
                ()=>{
                    ReactDom.unmountComponentAtNode(document.getElementById("root"))
                }
            } >卸载</button>
           
        </div>
    )

}

export default TestEffect 